<template>
  <div
    ref="chart"
    class="chart"
  />
</template>

<script>
import * as echarts from 'echarts'
import { getPriceTrend } from '@/api/bigdata/productPrice'
export default {
  data() {
    return {
      maxList: [],
      avgList: [],
      minList: [],
      timeList: [],
      colorList: ['#00BFFF', '#00FF00', '#FFA500']
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      getPriceTrend({
        startTime: '2024-03-01',
        endTime: '2025-05-01',
        flag: 2
      }).then(res => {
        res.data.sort((a, b) => {
          return new Date(a.time) - new Date(b.time)
        })
        this.maxList = res.data.map(item => item.maxPrice)
        this.avgList = res.data.map(item => item.avgPrice.toFixed(2))
        this.minList = res.data.map(item => item.minPrice)
        this.timeList = res.data.map(item => item.time.substring(5))
        this.drawLineChart()
      })
    },
    drawLineChart() {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['最高价格', '平均价格', '最低价格'],
          textStyle: {
            color: 'white' // 设置图例字体颜色为白色
          }
        },
        grid: {
          left: '6%',
          right: '6%',
          bottom: '6%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              iconStyle: {
                borderColor: '#FFF'
              },
              backgroundColor: '#007'
            }
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#fff',
            fontSize: 14,
            interval: 'auto',
            showMaxLabel: true
          },
          boundaryGap: false,
          data: this.timeList
        },
        yAxis: {
          type: 'value',
          name: '元/斤',
          nameTextStyle: {
            color: '#b3efff',
            fontSize: 14
          },
          min: 'dataMin', // 使用数据中的最小值作为Y轴的起点
          max: 'dataMax', // 使用数据中的最大值作为Y轴的终点
          axisLabel: {
            color: '#fff',
            fontSize: 14,
            interval: 0,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0a3e98',
              type: 'dotted'
            }
          }
        },
        series: [
          {
            name: '最高价格',
            type: 'line',
            data: this.maxList,
            itemStyle: {
              color: this.colorList[0]
            }
          },
          {
            name: '平均价格',
            type: 'line',
            data: this.avgList,
            itemStyle: {
              color: this.colorList[1]
            }
          },
          {
            name: '最低价格',
            type: 'line',
            data: this.minList,
            itemStyle: {
              color: this.colorList[2]
            }
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize();
      }, false);
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  width: 25vw;
  height: 22vh;
}
</style>
